<template>
  <div>
    <a-card class="card" :bordered="false">
      <task-form ref="task" :showSubmit="false" />
    </a-card>
    <!-- table -->
    <a-card style="margin-bottom:50px;">
      <a-tabs  @change="callback">
    <a-tab-pane :key="index" :tab="item" v-for="(item,index)  in tablist" >
      <div v-if="index == 8">
        
      </div>

    </a-tab-pane>
  </a-tabs>
   
    </a-card>
    <!-- fixed footer toolbar -->
    <footer-tool-bar style="display:flex;justify-content:center;">
      <a-button type="primary" @click="validate" :loading="loading">提交</a-button>
    </footer-tool-bar>
  </div>
</template>

<script>
  import TaskForm from './TaskForm'
  import FooterToolBar from '@/components/tools/FooterToolBar'

  export default {
    name: "AdvancedForm",
    components: {
      FooterToolBar,
      TaskForm
    },
    data () {
      return {
        
        description: '高级表单常见于一次性输入和提交大批量数据的场景。',
        loading: false,
  columnslist: {
    0: [
      {
        field: 'name',
        title: '学校名称',
        slots: { default: 'name' }
      },
      {
        field: 'workId',
        title: '开始时间(年月)',
        slots: { default: 'workId' }
      },
      {
        field: 'department',
        title: '结束时间(年月)',
        slots: { default: 'department' }
      },
      {
        field: 'department',
        title: "就读年份",
        slots: { default: 'department' }
      },
      {
        field: 'department',
        title: '学历',
        slots: { default: 'department' }
      },
      {
        field: 'relevantdocuments',
        title: '相关文件',
        slots: { default: 'relevantdocuments' },
        width: 200
      }
    ],
    1: [
      {
        field: 'operationType',
        title: '操作类型'
      },
      {
        field: 'effectiveDate',
        title: '生效日期',
        formatter: ({ cellValue }) => new Date(cellValue).toLocaleDateString()
      },
      {
        field: 'companyName',
        title: '公司名称'
      },
      {
        field: 'department',
        title: '部门'
      },
      {
        field: 'position',
        title: '职位'
      },
      {
        field: 'jobSequence',
        title: '岗位序列'
      },
      {
        field: 'rank',
        title: '职级'
      },
      {
        field: 'role',
        title: '角色'
      },
      {
        field: 'status',
        title: '状态'
      },
      {
        field: 'workCity',
        title: '工作城市'
      }
    ],
    2: [
      {
        field: 'startDate',
        title: '开始日期',
        formatter: ({ cellValue }) => new Date(cellValue).toLocaleDateString()
      },
      {
        field: 'endDate',
        title: '结束日期',
        formatter: ({ cellValue }) => new Date(cellValue).toLocaleDateString()
      },
      {
        field: 'company',
        title: '任职公司'
      },
      {
        field: 'position',
        title: '任职职务'
      },
      {
        field: 'workCity',
        title: '工作城市'
      },
      {
        field: 'relatedFiles',
        title: '相关文件',
        formatter: ({ cellValue }) => (
          <a href={cellValue} target="_blank" rel="noopener noreferrer">查看文件</a>
        )
      }
    ],
    3: [
      {
        field: 'awardName',
        title: '奖励名称'
      },
      {
        field: 'awardLevel',
        title: '奖励等级'
      },
      {
        field: 'awardDate',
        title: '获奖时间',
        formatter: ({ cellValue }) => new Date(cellValue).toLocaleDateString()
      },
      {
        field: 'awardDescription',
        title: '获奖描述'
      },
      {
        field: 'relatedFiles',
        title: '相关文件',
        formatter: ({ cellValue }) => (
          <a href={cellValue} target="_blank" rel="noopener noreferrer">查看文件</a>
        )
      }
    ],
    4: [
      {
        field: 'date',
        title: '时间',
        formatter: ({ cellValue }) => new Date(cellValue).toLocaleDateString()
      },
      {
        field: 'baseSalary',
        title: '基本工资',
        formatter: ({ cellValue }) => `$${cellValue.toFixed(2)}`
      },
      {
        field: 'positionSalary',
        title: '岗位工资',
        formatter: ({ cellValue }) => `$${cellValue.toFixed(2)}`
      },
      {
        field: 'performanceSalary',
        title: '绩效工资',
        formatter: ({ cellValue }) => `$${cellValue.toFixed(2)}`
      },
      {
        field: 'titleSalary',
        title: '职称工资',
        formatter: ({ cellValue }) => `$${cellValue.toFixed(2)}`
      },
      {
        field: 'senioritySalary',
        title: '工龄工资',
        formatter: ({ cellValue }) => `$${cellValue.toFixed(2)}`
      },
      {
        field: 'insuranceDeduction',
        title: '五险一金（扣除）',
        formatter: ({ cellValue }) => `$${cellValue.toFixed(2)}`
      },
      {
        field: 'actualSalary',
        title: '实发工资',
        formatter: ({ cellValue }) => `$${cellValue.toFixed(2)}`
      }
    ],
    5: [
      {
        field: 'operationType',
        title: '操作类型'
      },
      {
        field: 'changeDate',
        title: '变动时间',
        formatter: ({ cellValue }) => new Date(cellValue).toLocaleDateString()
      },
      {
        field: 'partyOrganizationName',
        title: '党组织名称'
      },
      {
        field: 'remarks',
        title: '备注'
      }
    ],
    6: [
      {
        field: 'titleChangeDate',
        title: '职称变更时间',
        formatter: ({ cellValue }) => new Date(cellValue).toLocaleDateString()
      },
      {
        field: 'titleName',
        title: '职称名称'
      },
      {
        field: 'titleLevel',
        title: '职称等级'
      },
      {
        field: 'relatedFiles',
        title: '相关文件',
        formatter: ({ cellValue }) => (
          cellValue.map(file => (
            <a href={file.url} target="_blank" rel="noopener noreferrer">{file.name}</a>
          ))
        )
      }
    ],
    7: [
      {
        field: 'name',
        title: '姓名'
      },
      {
        field: 'gender',
        title: '性别',
        formatter: ({ cellValue }) => cellValue === '1' ? '男' : '女'
      },
      {
        field: 'age',
        title: '年龄'
      },
      {
        field: 'relationship',
        title: '关系'
      },
      {
        field: 'workUnit',
        title: '工作单位'
      },
      {
        field: 'phone',
        title: '联系电话'
      }
    ],
    8: [
      {
        field: 'name',
        title: '姓名'
      },
      {
        field: 'employeeId',
        title: '员工编号'
      },
      {
        field: 'position',
        title: '职位'
      },
      {
        field: 'workUnit',
        title: '工作单位'
      },
      {
        field: 'notes',
        title: '备注'
      }
    ],
    9: [
      {
        field: 'action',
        title: '操作'
      },
      {
        field: 'enlistmentDate',
        title: '入伍时间'
      },
      {
        field: 'dischargeDate',
        title: '退伍时间'
      },
      {
        field: 'workUnit',
        title: '工作单位'
      },
      {
        field: 'notes',
        title: '备注'
      }
    ]
  },
        data: [
          {
            key: '1',
            name: '小明',
            workId: '001',
            editable: false,
            department: '行政部',
            relevantdocuments:['111111']
          },
          {
            key: '2',
            name: '李莉',
            workId: '002',
            editable: false,
            department: 'IT部'
          },
          {
            key: '3',
            name: '王小帅',
            workId: '003',
            editable: false,
            department: '财务部'
          }
        ],
        tablist:[
          "学习经历",
  "工作信息",
  "工作经历",
  "获奖经历",
  "薪资情况",
  "党员信息",
  "职称资格证书",
  "家庭及社会关系",
  "董监事任职情况",
  "服役情况",
  "员工电子信息"
        ]
      }
    },
    methods: {
      callback(){
        // 切换的时候提醒是否保存数据
        
        console.log(1); 
      },
      handleSubmit (e) {
        e.preventDefault()
      },
      newMember () {
        this.data.push({
          key: '-1',
          name: '',
          workId: '',
          department: '',
          editable: true,
          isNew: true
        })
      },
      remove (key) {
        const newData = this.data.filter(item => item.key !== key)
        this.data = newData
      },
      saveRow (key) {
        let target = this.data.filter(item => item.key === key)[0]
        target.editable = false
        target.isNew = false
      },
      toggle (key) {
        let target = this.data.filter(item => item.key === key)[0]
        target.editable = !target.editable
      },
      getRowByKey (key, newData) {
        const data = this.data
        return (newData || data).filter(item => item.key === key)[0]
      },
      cancel (key) {
        let target = this.data.filter(item => item.key === key)[0]
        target.editable = false
      },
      handleChange (value, key, column) {
        const newData = [...this.data]
        const target = newData.filter(item => key === item.key)[0]
        if (target) {
          target[column] = value
          this.data = newData
        }
      },

      // 最终全页面提交
      validate () {
        this.$refs.repository.form.validateFields((err, values) => {
          if (!err) {
            this.$notification['error']({
              message: 'Received values of form:',
              description: values
            })
          }
        })
        this.$refs.task.form.validateFields((err, values) => {
          if (!err) {
            this.$notification['error']({
              message: 'Received values of form:',
              description: values
            })
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .card{
    margin-bottom: 24px;
  }
</style>